<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>添加货币</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/fastclick.js"></script>
    <style>
        body,
        html {
            background: #fff;
        }

        .step-head {
            padding: 24px 0;
            background: -webkit-linear-gradient(left, #ff7e16, #ff5637);
            background: -o-linear-gradient(right, #ff7e16, #ff5637);
            background: -moz-linear-gradient(right, #ff7e16, #ff5637);
            background: linear-gradient(to right, #ff7e16, #ff5637);
        }

        .step-img {
            padding: 0 28px;
        }

        .step-img>img {
            width: 100%;
        }

        .step-head-text {
            padding: 0 14px;
            margin-top: 12px;
            overflow: hidden;
            font-size: 12px;
            color: #fff;
        }

        .step-head-text span:nth-child(1) {
            float: left;
        }

        .step-head-text span:nth-child(2) {
            float: right;
        }

        .field-box {}

        .id-title {
            font-size: 13px;
            color: #3c3c3c;
            margin: 14px;
        }

        .id-card-box {
            padding: 0 16px;
            overflow: hidden;
        }

        .id-card {
            width: 46%;
            position: relative;
            padding: 13px 17px 32px 17px;
            float: left;
            background: #f5f8ff;
            border-radius: 6px;
            overflow: hidden;
            box-sizing: border-box;
        }

        .id-img-back {
            width: 100%;
        }

        .id-img {
            position: relative;
            background-size: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }

        .imgenter {
            position: absolute;
            width: 82%;
            height: 82%;
            top: 9%;
            left: 9%;
            bottom: 9%;
        }

        .id-p {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            line-height: 26px;
            text-align: center;
            color: #fff;
            font-size: 12px;
            background: #ff7d50;
        }

        .file {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
        }

        .prompt {
            font-size: 13px;
            color: #3c3c3c;
            margin: 14px;
            padding-left: 17px;
            background: url('../../image/audit/warning.png') no-repeat left center;
            background-size: 11px;
        }

        .rules-box {
            padding: 0 14px;
        }

        .rules-box img {
            width: 100%;
        }

        .step-btn {
            width: 80%;
            margin-left: 10%;
            margin-top: 57px;
            height: 46px;
            border-radius: 46px;
            background: -webkit-linear-gradient(left, #f4a123, #f46a21);
            background: -o-linear-gradient(right, #f4a123, #f46a21);
            background: -moz-linear-gradient(right, #f4a123, #f46a21);
            background: linear-gradient(to right, #f4a123, #f46a21);
            box-shadow: 0 5px 10px 5px rgba(254, 124, 24, 0.1);
            font-size: 17px;
            color: #fff;
            text-align: center;
            line-height: 46px;
        }
    </style>
</head>

<body>
    <div id="cell" v-cloak>
        <div class="stepbox">
            <div class="step-head">
                <div class="step-img">
                    <img src="../../image/audit/step2.png">
                </div>
                <p class="step-head-text">
                    <span>信息认证</span>
                    <span>身份提交</span>
                </p>
            </div>
            <div class="field-box">
                <p class="id-title">请上传您的身份证正反面照片</p>
                <div class="id-card-box">
                    <div class="id-card">
                        <input class="file" ref="idpositive" type="file" accept='image/*' @change="getzImg()">
                        <div class="id-img">
                            <img class="id-img-back" src="../../image/audit/idwrap.png">
                            <img :src="idimg1" class="imgenter">
                        </div>
                        <p class="id-p">点击上传身份证正面</p>
                    </div>
                    <div class="id-card" style="float: right;">
                        <input class="file" ref="idreverse" type="file" accept='image/*' @change="getfImg()">
                        <div class="id-img">
                            <img class="id-img-back" src="../../image/audit/idwrap.png">
                            <img :src="idimg2" class="imgenter">
                        </div>
                        <p class="id-p">点击上传身份证反面</p>
                    </div>
                </div>
                <p class="prompt">注意事项</p>
                <div class="rules-box">
                    <img src="../../image/audit/rules.png">
                </div>
                <p class="step-btn" @click="handlerSub">提交</p>
            </div>
        </div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script>
    apiready = function() {
        FastClick.attach(document.body);
        header = $api.byId('header');
        //适配iOS 7+，Android 4.4+状态栏
        $api.fixStatusBar(header);
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            api.openWin({
                name: 'home',
                url: 'home.html'
            });
        });
        let img1 = '../../image/audit/idpositive.png'
        let img2 = '../../image/audit/idreverse.png'
        var vm = new Vue({
            el: '#cell',
            data: {
                idimg1: img1,
                idimg2: img2
            },
            methods: {
                handlerSub() {
                    var that = this;
                    if (that.idimg1 === '../../image/audit/idpositive.png') {
                        $api.confirm('请选择身份证正面')
                        return false
                    } else if (that.idimg2 === '../../image/audit/idreverse.png') {
                        $api.confirm('请选择身份证反面')
                        return false
                    }
                    api.openWin({
                        name: 'success',
                        url: 'success.html',
                        slidBackEnabled: false
                    });
                },
                getzImg() {
                    var that = this
                    var file = that.$refs.idpositive.files[0];
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(e) {
                        that.idimg1 = e.target.result
                    }
                },
                getfImg() {
                    var that = this
                    var file = that.$refs.idreverse.files[0];
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(e) {
                        that.idimg2 = e.target.result
                    }
                }
            },
            mounted: function() {

            }
        })
    }
</script>

</html>
